{% load static %}
{% load rbac %}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>IP地址管理系统</title>
    <link rel="shortcut icon" href="{% static 'stark/imgs/logo.png' %} ">
    <link rel="stylesheet" href="{% static 'stark/plugins/bootstrap/css/bootstrap.css' %} "/>
    <link rel="stylesheet" href="{% static 'stark/plugins/font-awesome/css/font-awesome.css' %} "/>
    <link rel="stylesheet" href="{% static 'stark/plugins/datetimepicker/css/bootstrap-datetimepicker.css' %} "/>
    <link rel="stylesheet" href="{% static 'stark/css/commons.css' %} "/>
    <link rel="stylesheet" href="{% static 'stark/css/nav.css' %} "/>
    <link rel="stylesheet" href="{% static 'stark/css/search-group.css' %} "/>
    <link rel="stylesheet" href="{% static 'rbac/css/rbac.css' %} "/>
    <link rel="stylesheet" href="{% static 'stark/css/tooltipster.css' %} "/>
    <style>
        body {
            margin: 0;
        }

        .no-radius {
            border-radius: 0;
        }

        .no-margin {
            margin: 0;
        }

        .pg-body > .left-menu {
            background-color: #EAEDF1;
            position: absolute;
            left: 0;
            top: 48px;
            bottom: 0;
            width: 220px;
            border: 1px solid #EAEDF1;
            overflow: auto;
        }

        .pg-body > .right-body {
            position: absolute;
            left: 225px;
            right: 0;
            top: 48px;
            bottom: 0;
            overflow: scroll;
            border: 1px solid #ddd;
            border-top: 0;
            font-size: 13px;
            min-width: 755px;
        }

        .navbar-right {
            float: right !important;
            margin-right: -15px;
        }

        .mobiledj_container {
            padding: 15px;
        }

    </style>
    {% block css %}{% endblock %}
</head>
<body>

<div class="pg-header">
    <div class="nav">
        <div class="logo-area left">
            <a href="#">
                <img class="logo" src="{% static 'stark/imgs/logo.png' %}">
                <span style="font-size: 18px;">IP地址管理系统 </span>
            </a>
        </div>

        <div class="left-menu left">
            <a class="menu-item">资产管理</a>
            <a href="/current/userinfo/" class="menu-item">用户信息</a>
            <div class="menu-item">
                <span>使用说明</span>
                <i class="fa fa-caret-down" aria-hidden="true"></i>
                <div class="more-info">
                    {#                    <a href="#" class="more-item">管他什么菜单</a>#}
                    {#                    <a href="#" class="more-item">实在是编不了</a>#}
                </div>
            </div>
        </div>

        <div class="right-menu right clearfix">
            <i class="fa fa-user fa-2x" aria-hidden="true"></i> <span
                style="margin-left: 5px;margin-right: 15px; ">{{ request.session.user_info.nickname }}</span>
            <i class="fa fa-laptop fa-2x" aria-hidden="true"></i> <span
                style="margin-left: 5px;margin-right: 5px;"> {{ request.session.ip }} </span>
            <div class="user-info right">

                <a href="#" class="avatar">
                    <img class="img-circle" src="{% static 'stark/imgs/default.png' %}">
                </a>

                <div class="more-info">
                    <a href="/current/userinfo/" class="more-item">个人信息</a>
                    <a href="/logout/" class="more-item">注销</a>
                </div>
            </div>

            {#            <a class="user-menu right">#}
            {#                消息#}
            {#                <i class="fa fa-commenting-o" aria-hidden="true"></i>#}
            {#                <span class="badge bg-success">2</span>#}
            {#            </a>#}

            {#            <a class="user-menu right">#}
            {#                通知#}
            {#                <i class="fa fa-envelope-o" aria-hidden="true"></i>#}
            {#                <span class="badge bg-success">2</span>#}
            {#            </a>#}

            {#            <a class="user-menu right">#}
            {#                任务#}
            {#                <i class="fa fa-bell-o" aria-hidden="true"></i>#}
            {#                <span class="badge bg-danger">4</span>#}
            {#            </a>#}
        </div>

    </div>
</div>
<div class="pg-body">
    <div class="left-menu">
        <div class="menu-body">
            {% multi_menu request %}
        </div>
    </div>
    <div class="right-body">
        <div>
            {% breadcrumb request %}
        </div>
        {% if messages %}
            {% for message in messages %}
                {{ message }}
            {% endfor %}
        {% endif %}
        <div style="padding: 10px;">
            {% block content %} {% endblock %}
        </div>
    </div>
</div>
<script src="{% static 'stark/js/echarts.min.js' %}"></script>
<script src="{% static 'stark/js/jquery-3.3.1.min.js' %} "></script>
<script src="{% static 'stark/js/jquery.cookie.js' %} "></script>
<script src="{% static 'stark/plugins/bootstrap/js/bootstrap.js' %} "></script>
<script src="{% static 'stark/plugins/datetimepicker/js/bootstrap-datetimepicker.js' %} "></script>
<script src="{% static 'stark/plugins/datetimepicker/js/locales/bootstrap-datetimepicker.zh-CN.js' %} "></script>
<script src="{% static 'rbac/js/rbac.js' %} "></script>
<script src="{% static 'stark/js/jquery.tooltipster.min.js' %}"></script>

<script type="text/javascript">
    $('.form_date').datetimepicker({
        minView: "month",
        language: "zh-CN",
        sideBySide: true,
        format: "yyyy-mm-dd",
        bootcssVer: 3,
        startDate: new Date(),
        autoclose: true,
        pickerPosition: "bottom-left"
    });
</script>
{% block js %} {% endblock %}
</body>
</html>